<template>
    <div class="personalNews">
        <van-notice-bar @click="notice" left-icon="volume-o" scrollable text="技术是开发它的人的共同灵魂。" /> 
           <div class="theContent">
                    <!-- 头部信息 -->
                <div class="theContent-head">
                    <div class="head-left">
                        <div class="lead">
                            <a href="javascript:;">
                                <img @click="install" src="../../images/touxiang.png" alt="">
                            </a>
                        </div>
                        <div class="information">
                            <p class="names" :name='username'>用户：{{username}}</p>
                            <p class="handset" :home="userId">{{userId}}</p>
                        </div>
                   </div>
                   <div class="qiandao">
                        <p @click="jifen">签到领积分</p>
                   </div>
                </div> 
                <!-- 开通会员 -->
                <div class="member">
                    <p>开通绿卡会员，平均可省806元/年</p>
                    <div>立即开通></div>
                </div>
                <!-- 我的订单 -->
                <div class="theContent-orderList"> 
                   <div class="orderContainer">
                        <div class="order">
                            <h5>我的订单</h5>
                            <p @click="allOrders">查看全部订单></p>
                        </div>
                        <van-grid>
                            <van-grid-item @click="allOrders" icon="paid" text="待支付" />
                            <van-grid-item @click="allOrders" icon="logistics" text="待收货" />
                            <van-grid-item @click="allOrders" icon="comment-o" text="待评价" />
                            <van-grid-item @click="allOrders" icon="idcard" text="售后/退款" />
                        </van-grid>
                    </div>
                </div>
                <!-- 小功能 -->
                <div class="theContent-smallFunction">
                   <van-grid>
                            <van-grid-item @click="allOrders" icon="vip-card-o" text="绿卡会员" />
                            <van-grid-item @click="allOrders" icon="star-o" text="我的收藏" />
                            <van-grid-item @click="harvestAddress" icon="location-o" text="收货地址" />
                            <van-grid-item @click="OfficialAccount" icon="chat-o" text="关注公众号"/>
                            <van-grid-item @click="allOrders" icon="service-o" text="客服与帮助" />
                            <van-grid-item @click="allOrders" icon="scan" text="扫一扫" />
                            <van-grid-item @click="allOrders" icon="records" text="意见反馈" />
                            <van-grid-item @click="install" icon="setting-o" text="设置" />
                    </van-grid> 
                </div>  
                <lovely></lovely>
           </div>  
                <!-- 关注公众号弹窗 -->
           <van-dialog class="OfficialAccount" v-model="show" title="打开微信扫一扫" show-cancel-button>
                    <img src="../../images/vx.jpg" />
            </van-dialog>
    </div>
</template>

<script> 
// 引入 Dialog 弹窗组件
import { Dialog } from 'vant';

// 引入猜你喜欢组件
import Lovely from '../components/gyoulike.vue'

export default { 
    // 注册组件
    components:{
        Lovely
    },
        data(){
            return{
                show: false,
                userId:'',
                username:''
            }
        },
        methods:{
            //  公告点击弹出
            notice(){
              Dialog.alert({
                message: '当疯狂与优雅成为羁绊之时，便是灵魂自由的开始...',
                theme: 'round-button',
                }).then(() => {
                // on close
            });
            },
            // 点击签到领积分
            jifen(){
                    Dialog.alert({
                    message: '你个吊毛，还想领积分',
                    theme: 'round-button',
                    }).then(() => {
                    // on close
                });
            },
            //点击收货地址
            harvestAddress(){
                 this.$router.push('/harvestAddress')
            },
            //  点击关注公众号
            OfficialAccount(){
                this.show= true  
            },
            // 点击设置
            install(){
                this.$router.push('/install')
            },
            // 我的订单
            allOrders(){
                Dialog.alert({
                    message: '待开发！',
                    }).then(() => {
                    // on close
                    });
            },
            userIds(){
                this.userId = this.$store.getters['common/userInfo'].id 
                let aa = this.userId.split('') 
                aa.splice(3,4)
                aa.splice(3,0,'*','*','*','*')
                this.userId = aa.join('')  

                this.username = this.$store.getters['common/userInfo'].name
               
            }
            
        },
        created() {
           this.userIds()
        },
}
</script>
<style lang="less" scoped>
    // 引入全局样式
    @import "../../style/index.less";
    .personalNews{
        height: calc(100% - 40px);  
        overflow-x: hidden;
        //  清除组件默认边框
        .van-grid{
            .van-grid-item{
                border: 0;
            }
            ::after{
                 border: 0;
            }
        }
        .theContent{
             height:  calc(100% - 40px);
             padding: 5px 10px 0; 
            //头部信息
             .theContent-head{  
                height: 20%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background-color: #E4E4E1;
                background-image: radial-gradient(at top center, rgba(255,255,255,0.03) 0%, rgba(0,0,0,0.03) 100%), linear-gradient(to top, rgba(255,255,255,0.1) 0%, rgba(188, 191, 192, 0.6) 100%);
                background-blend-mode: normal, multiply;
                border-top-left-radius: 6px;
                border-top-right-radius: 6px;
                padding-left: 15px;
                .head-left{
                    display: flex;
                    align-items: center;
                    .lead{
                        a{
                            display: inline-block;
                            width: 65px;
                            height: 65px;
                            border-radius: 50%;
                            border: 1px solid #000;
                            > img{
                                display: inline-block;
                                width: 65px;
                                height: 65px;
                                border-radius: 50%;
                            }
                        }
                    }
                }
                 
                .information{
                    padding-left: 10px;
                    p{
                        margin: 0;
                        padding: 0;
                    }
                    .names{
                        font-size: 16px;
                    }
                    .handset{
                        font-size: 12px;
                        color: rgb(133, 133, 133);
                    }
                }
                .qiandao{   
                    margin-right: 28px;
                    > p{ 
                        right: 32px; 
                        width: 100px;
                        height: 35px;
                        line-height: 35px;
                        text-align: center;
                        border-radius: 20px; 
                        font-size: 12px;
                        color: rgb(68, 68, 68);
                        background: #fff;
                        box-shadow: 0px 10px 16px #6a6a6a;
                    }
                }
                
            }
             // 开通会员
             .member{
                 height: 58px; 
                 background:#ff480b;
                 background-image: linear-gradient(-60deg, #f13629 0%, #ff6619 100%);
                 box-shadow: 0 16px 90px #ef9059;
                 display: flex;
                 justify-content: space-around; 
                 top: 0; 
                 border-bottom-left-radius: 6px;
                 border-bottom-right-radius: 6px;
                 >p{
                     padding: 0;
                     margin: 0;
                     font-size: 12px;
                     line-height: 58px;
                     color: rgb(255, 255, 255);
                 }
                 >div{
                     width: 100px;
                     height: 30px;
                     margin: 12px;
                     text-align: center;
                     line-height: 30px;
                     font-weight: 700;
                     border-radius: 16px; 
                     font-size: 12px;
                    color: rgb(75,40,13);
                    background: rgb(239,216,142);
                 }
             }
             //我的订单
             .theContent-orderList{
                 height:22%; 
                 border-radius: 6px;
                 margin: 20px 0;
                .orderContainer{
                    height: 100%;
                     border-radius: 6px;
                     padding: 6px 6px;
                     background-color: #fff;
                     .order{
                         border-radius: 6px;
                         display: flex;  
                         justify-content: space-between;
                         h5{
                             font-size: 22px;
                             color: #000;
                             line-height: 50px; 
                             padding-left: 10px;
                             padding: 0px;
                             margin: 0; 
                         }
                         p{
                             color: rgb(167, 167, 167);
                             font-size: 14px; 
                             line-height: 50px; 
                             padding-left: 10px;
                             padding: 0px;
                             margin: 0;
                         }
                     }
                }
             }
             //小功能
             .theContent-smallFunction{ 
                 padding: 10px;
                 background-color: #fff; 
                 border-radius: 6px;
             }

        }    
    } 
    .OfficialAccount{
        width: 300px;
        /* height: 300px; */
        margin: 0;
        padding: 0;

        img{
            display: block; 
            line-height: 300px;
            width: 150px;
            margin: auto;
            padding: 20px 10px;
        }
    }
</style>